<template>
  <div class="app-container">
    <el-card title="绑定微信">
      <el-container style="height: 100vh;">
        <el-header>欢迎绑定微信</el-header>
        <el-main>
          <div class="scan-container">
            <img :src="qrcodeUrl" alt="微信公众号二维码" width="150">
            <div class="scan-instructions">
              <p>1. 打开微信扫一扫，扫描上面的二维码。</p>
              <p>2. 关注我们的公众号。</p>
              <p>3. 按照公众号提示完成微信绑定。</p>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-card>

  </div>
</template>

<script>
import { getBindQrcode } from '@projectName/api/profile/profile'

export default {
  name: 'BindWechat',
  props: {
    userinfo: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isUp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timeFun: null,
      qrcodeUrl: 'path/to/your/qrcode.png' // 替换为你的二维码图片路径
    }
  },
  created() {
    this.getBindQrcode()
  },
  beforeDestroy() {
    clearInterval(this.timeFun)
    this.timeFun = null
  },
  methods: {
    getuserinfoTime() {
      if (!this.userinfo.open_id) {
        this.timeFun = setInterval(() => {
          this.$emit('getuserinfoTime')
        }, 1000)
      } else {
        clearInterval(this.timeFun)
      }
    },
    getBindQrcode() {
      getBindQrcode({
        time_type: 0,
        'scene': 'userbind'
      }).then(res => {
        this.qrcodeUrl = res.data.url
        this.getuserinfoTime()
      })
    }
  }
}
</script>

  <style scoped>
  .scan-container {
    text-align: center;
    padding: 20px;
  }
  .scan-instructions {
    margin-top: 20px;
  }
  </style>
